<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>jQuery checkboxTree plugin demo</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
        <link rel="stylesheet" type="text/css" href="demo.css">
        <link rel="stylesheet" type="text/css" href="jquery.checkboxtree.css">
        <script type="text/javascript" src="jquery.checkboxtree.js"></script>
        <script type="text/javascript">
        //<!--
            $(document).ready(function() {
                $('#tree').checkboxTree();
                $('#imageTree').checkboxTree({
                    collapseImage: 'images/minus.png',
                    expandImage: 'images/plus.png',
                    leafImage: 'images/blank.png'
                });
                $('#collapseAllButtonsTree').checkboxTree({
                    collapseAllButton: 'Collapse all',
                    expandAllButton: 'Expande all'
                });
            });
        //-->
        </script>
    </head>
    <body>
        <a href="https://checkboxtree.googlecode.com/">Project Home</a>
        <hr>
        <table>
            <caption>jQuery checkboxTree plugin demo</caption>

            <tr>
                <th>Example
            <tr>
                <td>
                    <ul id="tree">
                        <li><input type="checkbox">Root
                        <ul>
                            <li><input type="checkbox">Node 1
                            <ul>
                                <li><input type="checkbox">Node 1.1
                            </ul>
                        </ul>
                        <ul>
                            <li><input type="checkbox">Node 2
                            <ul>
                                <li><input type="checkbox">Node 2.1
                                <li><input type="checkbox">Node 2.2
                                <li><input type="checkbox">Node 2.3
                                <ul>
                                    <li><input type="checkbox">Node 2.3.1
                                    <li><input type="checkbox">Node 2.3.2
                                </ul>
                                <li><input type="checkbox">Node 2.4
                                <li><input type="checkbox">Node 2.5
                                <li><input type="checkbox">Node 2.6
                            </ul>
                        </ul>
                    </ul>
                <td>
                    <p>This example show default script behaviour.</p>

            <tr>
                <th>Example
            <tr>
                <td>
                    <ul id="imageTree">
                        <li><input type="checkbox">Root
                        <ul>
                            <li><input type="checkbox">Node 1
                            <ul>
                                <li><input type="checkbox">Node 1.1
                            </ul>
                        </ul>
                        <ul>
                            <li><input type="checkbox">Node 2
                            <ul>
                                <li><input type="checkbox">Node 2.1
                                <li><input type="checkbox">Node 2.2
                                <li><input type="checkbox">Node 2.3
                                <ul>
                                    <li><input type="checkbox">Node 2.3.1
                                    <li><input type="checkbox">Node 2.3.2
                                </ul>
                                <li><input type="checkbox">Node 2.4
                                <li><input type="checkbox">Node 2.5
                                <li><input type="checkbox">Node 2.6
                            </ul>
                        </ul>
                    </ul>
                <td>
                    <p>This example show how to use images to handle collapse/expande feature.</p>
                    <dl>
                        <dt>collapseImage
                        <dd>'images/minus.png'
                        <dt>expandImage
                        <dd>'images/plus.png'
                        <dt>leafImage
                        <dd>'images/blank.png'
                    <dl>

            <tr>
                <th>Example
            <tr>
                <td>
                    <ul id="collapseAllButtonsTree">
                        <li><input type="checkbox">Root
                        <ul>
                            <li><input type="checkbox">Node 1
                            <ul>
                                <li><input type="checkbox">Node 1.1
                            </ul>
                        </ul>
                        <ul>
                            <li><input type="checkbox">Node 2
                            <ul>
                                <li><input type="checkbox">Node 2.1
                                <li><input type="checkbox">Node 2.2
                                <li><input type="checkbox">Node 2.3
                                <ul>
                                    <li><input type="checkbox">Node 2.3.1
                                    <li><input type="checkbox">Node 2.3.2
                                </ul>
                                <li><input type="checkbox">Node 2.4
                                <li><input type="checkbox">Node 2.5
                                <li><input type="checkbox">Node 2.6
                            </ul>
                        </ul>
                    </ul>
                <td>
                    <p>This example show how to add buttons to collapse/expand all tree.</p>
                    <dl>
                        <dt>collapseAllButton
                        <dd>'Collapse all'
                        <dt>expandAllButton
                        <dd>'Expande all'
                    <dl>

        </table>
    </body>
</html>
